<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/2/19 0019
  Time: 11:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7-dist/css/bootstrap.css" />
    <script type="text/javascript" src="/bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    <style>
        .content{
            height: 400px;
            width: 600px;
            margin: 0px auto;
            border: 2px solid black;
        }
        .content .content_left{
            width: 100%;
            margin-top: 20px;
            border: 1px solid goldenrod;
        }
        .content .content_right{
            width: 100%;
            margin-top: 20px;
            float: right;
            border: 1px solid red;
            text-align: right;
        }
    </style>
</head>
<body>
<h1>用户<span class="guestId" id="${sessionScope.user.id}">${sessionScope.user.username}</span>与客服对话</h1>
<h1>请选择客服</h1>
<c:forEach items="${kefu}" var="kefu">
    <button>${kefu.username}</button>
</c:forEach>
<hr/>
<textarea id="chatMessage"></textarea>
<button id="sendMessage">发送</button>
<div class="content">
    <div class="content_left">
        这里是发送的内容
    </div>
    <div class="content_right">
        这里是回复的内容
    </div>
    <div style="clear: both"></div>

    <div class="content_left">
        这里是发送的内容
    </div>
    <div class="content_right">
        这里是回复的内容
    </div>
    <div style="clear: both"></div>
</div>
<script type="text/javascript" src="/guestKefu.js"></script>
<%--<script>--%>
    <%--var websocket = null;--%>
    <%--//判断当前浏览器是否支持WebSocket--%>
    <%--if ('WebSocket' in window) {--%>
        <%--websocket = new WebSocket("ws://localhost:8080/websocket");--%>
    <%--}--%>
    <%--else {--%>
        <%--alert('当前浏览器 Not support websocket')--%>
    <%--}--%>
    <%--//连接发生错误的回调方法--%>
    <%--websocket.onerror = function () {--%>
        <%--// setMessageInnerHTML("WebSocket连接发生错误");--%>
        <%--alert("通话出现问题，请稍后。。。。。");--%>
    <%--};--%>

    <%--//连接成功建立的回调方法--%>
    <%--websocket.onopen = function () {--%>
        <%--var o = {--%>
            <%--message: "请问您有什么需要帮助的吗?"//这里是信息--%>
        <%--};--%>
        <%--setMessageInnerHTML(JSON.stringify(o));--%>
    <%--}--%>

    <%--//接收到消息的回调方法--%>
    <%--websocket.onmessage = function (event) {--%>
        <%--setMessageInnerHTML(event.data);--%>
    <%--}--%>

    <%--//连接关闭的回调方法--%>
    <%--websocket.onclose = function () {--%>
        <%--// setMessageInnerHTML("WebSocket连接关闭");--%>
        <%--// setMessageInnerHTML("聊天结束.....");--%>
        <%--alert("通话结束！");--%>
    <%--}--%>

    <%--//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。--%>
    <%--window.onbeforeunload = function () {--%>
        <%--closeWebSocket();--%>
    <%--}--%>
    <%--//将消息显示在网页上--%>
    <%--function setMessageInnerHTML(innerHTML) {--%>
        <%--// console.log("和后台交互获取的信息"+innerHTML);--%>
        <%--var obj = JSON.parse(innerHTML); //由JSON字符串转换为JSON对象--%>
        <%--answers(obj);--%>
    <%--}--%>
    <%--//关闭WebSocket连接--%>
    <%--function closeWebSocket() {--%>
        <%--websocket.close();--%>
    <%--}--%>

    <%--function openWebSocket() {--%>
        <%--websocket.open();--%>
    <%--}--%>


    <%--$("#sendMessage").click(function () {--%>
       <%--var msg=$("#chatMessage").val();--%>
       <%--sendMessage(msg);--%>
        <%--// setTimeout(answers, 1000);--%>
    <%--});--%>

    <%--/**--%>
     <%--* 发送方发送消息--%>
     <%--**/--%>
    <%--function sendMessage(msg) {--%>
        <%--var sendId=$(".guestId").attr("id");--%>
        <%--var s="<div class='content_left'>"+msg+"</div>";--%>
        <%--$(".content").append(s);--%>
        <%--var o = {--%>
            <%--acceptId: 2,//这里是要接收的客服id--%>
            <%--sendId: sendId,//这是发送者的Id--%>
            <%--message: msg//这里是信息--%>
        <%--};--%>
        <%--var message = JSON.stringify(o);//要返回的json字符串--%>
        <%--websocket.send(message);--%>
    <%--}--%>

    <%--/**--%>
     <%--* 接收方发送从后台返回的信息--%>
     <%--* @param obj--%>
     <%--*/--%>
    <%--function answers(obj) {--%>
        <%--var s="<div class='content_right'>"+obj.message+"</div>";--%>
        <%--$(".content").append(s);--%>
    <%--}--%>
<%--</script>--%>
</body>
</html>
